<template>
  <view class="container">
    <s-nav-bar
      back
      immersive
      back-icon="cross"
      :back-icon-size="24"
      color="white"
      :back-style="{
        padding: '0 2px',
      }"
      background="transparent"
    />
    <video
      id="video"
      class="video"
      :src="url"
      :show-fullscreen-btn="false"
      enable-play-gesture
      autoplay
      @ended="onVideoEnded"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: '',
    };
  },
  onLoad(options) {
    this.url = decodeURIComponent(options.url);
    this.initVideoCtx();
  },
  methods: {
    initVideoCtx() {
      this.videoCtx = uni.createVideoContext('video', this);
    },
    onVideoEnded() {
      this.videoCtx.seek(0);
      this.$nextTick(() => {
        this.videoCtx.pause();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  height: 100vh;
  background-color: black;
}
.video {
  position: absolute;
  top: 0;
  width: 100%;
  height: calc(100% - var(--safe-area-inset-bottom));
}
</style>
